<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页布局 exp</title>
    <link rel="stylesheet" href="exp_css.css">
</head>
<body>

<!-- 页面 banner 头部 -->
<div class="header">
    <h1>exp 展示页</h1>
    <p> 重置浏览器大小查看效果 </p>
</div>

<!-- 导航栏 -->
<div class="topnav">
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#" style="float:right">链接</a>
</div>

<!-- 内容展示区块， 左右列式布局 -->
<div class="row">

<!--    左列文章展示  -->
    <div class="leftcolumn">
        <div class="card">
            <h2>文章标题</h2>
            <h5>2024/5/8</h5>
            <div class="fakeimg" style="height: 200px">图片</div>
            <p>一些文本...</p>
            <p>exp</p>
        </div>
        <div class="card">
            <h2>文章标题</h2>
            <h5>2024/5/8</h5>
            <div class="fakeimg" style="height: 200px">图片</div>
            <p>一些文本...</p>
            <p>exp</p>
        </div>
        <div class="card">
            <table >
                <tr>
                    <td>exp head</td>
                    <td>exp foot</td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td>内容</td>
                </tr>
            </table>
        </div>
        <div class="card">
            <form>
                username: <input type="text" name="user">
                password: <input type="text" name="password">
                <input type="submit" value="Submit">
                <a href="../vue_exp_0.html"> click me</a>
            </form>
        </div>
    </div>

<!--  右列用户信息  -->
    <div class="rightcolumn">
        <div class="card">
            <h2>about me</h2>
            <div class="fakeimg" style="height:100px">图片</div>
            <p>about me...</p>
        </div>
        <div class="card">
            <h3>热门文章</h3>
            <div class="fakeimg"><p>图片</p></div>
            <div class="fakeimg"><p>图片</p></div>
            <div class="fakeimg"><p>图片</p></div>
        </div>
        <div class="card">
            <h3>关注我</h3>
            <p>一些文本</p>
        </div>
    </div>
</div>

<!-- 页脚  -->
<div class="footer">
    <h2>底部区域</h2>
</div>

</body>
</html>